<template>
  <div class="password">
    <div class="tab">
      <div class="tab-content">
        <img src="../../assets/images/logo.jpg" alt @click="$router.push('/')">
        <span class="tj">讨教</span>
        <span class="txz">通行证</span>
      </div>
    </div>
    <div class="login-box">
      <div class="box">
        <div class="forget-pw clearfix">
          <ul class="clearfix">
            <li v-bind:class="{ active: isActive}">
              <span v-bind:class="{ active1: isActive1 }">
                <i>1</i>
              </span>确认账号
            </li>
            <li v-bind:class="{ active2: isActive2 }">
              <span v-bind:class="{ active3: isActive3 }">
                <i>2</i>
              </span>安全验证
            </li>
            <li v-bind:class="{ active4: isActive4 }">
              <span v-bind:class="{ active5: isActive5 }">
                <i>3</i>
              </span>重置密码
            </li>
          </ul>
        </div>
        <!-- 第一步 -->
        <div class="one_main" v-if="one">
          <div class="photo">
            <span>
              <i class="iconfont icon-all-yonghuming"></i>
            </span>
            <input type="text" placeholder="请填写手机号码, 用户名，或者邮箱" v-model="username">
          </div>
          <p v-if="uname">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>登录名或密码错误，请重试</em>
          </p>
          <div class="btn" @click="goNext">下一步</div>
          <div class="list">
            <div>已有帐号，</div>
            <div class="login" @click="$router.push('/login')">立即登录</div>
          </div>
        </div>
        <!-- 第二步 -->
        <div class="two_main" v-if="two">
          <div class="msg">
            <div>为了保护账号安全，需要验证手机有效性</div>
            <i>点击以下按钮，将会发送验证码到你的手机</i>
            <br>
            <span>158****9395</span>
          </div>
          <div class="box-card">
            <span>
              <i class="iconfont icon-all-ziyuan"></i>
            </span>
            <input type="text" placeholder="手机验证码" v-model="msgcord">
            <button @click="sendCord">{{defaultCode}}</button>
          </div>
          <p v-if="cord">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>请输入验证码</em>
          </p>
          <div class="btn" @click="goCord">下一步</div>
        </div>
        <!-- 第三步 -->
        <div class="three_main" v-if="three">
          <div class="newpsw">
            <span>
              <i class="iconfont icon-all-mima"></i>
            </span>
            <input type="text" placeholder="请输入登录密码（6位以上）" v-model="password">
          </div>
          <div class="newpsw">
            <span>
              <i class="iconfont icon-all-mima"></i>
            </span>
            <input type="text" placeholder="请重新输入新密码" v-model="newpassword">
          </div>
          <p v-if="psw">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>请输入新密码</em>
          </p>
          <p v-if="newpsw">
            <i class="iconfont icon-all-jinggao-"></i>
            <em>请输入确认密码</em>
          </p>
          <div class="btn" @click="goResetting">重置密码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "password",
  data() {
    return {
      isActive: true,
      isActive1: true,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false,
      defaultCode: "获取验证码",
      password: "",
      newpassword: "",
      msgcord: "",
      username: "",
      uname: false,
      one: true,
      two: false,
      cord: false,
      three: false,
      newpsw: false,
      psw: false
    };
  },
  methods: {
    goNext() {
      if (this.username === "") {
        this.uname = true;
        return;
      }
      this.one = false;
      this.two = true;
      this.three = false;
      this.isActive = false;
      this.isActive1 = false;
      this.isActive2 = true;
      this.isActive3 = true;
    },
    goCord() {
      console.log(111);
      if (this.msgcord === "") {
        this.cord = true;
        return;
      }
      this.three = true;
      this.one = false;
      this.two = false;
      this.isActive = false;
      this.isActive1 = false;
      this.isActive2 = false;
      this.isActive3 = false;
      this.isActive4 = true;
      this.isActive5 = true;
    },
    //获取手机验证码
    sendCord() {
      if (this.defaultCode !== "获取验证码") {
        return;
      }
      this.defaultCode = "发送中";
      this.codeTimer();
    },
    goResetting() {
      console.log(111);
      if (this.password === "") {
        this.psw = true;
        this.newpsw = false;
        return;
      }
      if (this.newpassword === "") {
        this.newpsw = true;
        this.psw = false;
        return;
      }
      this.$router.push("/login");
    },
    //获取验证码倒计时
    codeTimer() {
      let count = 60;
      let timer = setInterval(() => {
        count--;
        if (count < 0) {
          clearInterval(timer);
          this.defaultCode = "获取验证码";
          return;
        }
        this.defaultCode = count + "秒";
      }, 1000);
    }
  },

  components: {}
};
</script>
<style lang="scss" scoped>
.password {
  width: 100%;
  background: #d8d9d9;
  margin-top: -60px;
  height: 770px;
  .tab {
    background: #fff;
    height: 70px;
    .tab-content {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      img {
        width: 60px;
        height: 60px;
        margin-top: 5px;
      }
      .tj {
        height: 40px;
        width: 60px;
        margin-top: 10px;
        line-height: 40px;
        //  padding-left:0px;
        margin-left: 20px;
        border-right: 1px solid #666;
        font-size: 18px;
      }
      .txz {
        height: 40px;
        width: 60px;
        margin-top: 10px;
        line-height: 40px;
        padding-left: 10px;
        font-weight: 900;
      }
    }
  }
  .login-box {
    width: 1024px;
    border-radius: 2px;
    background: #fff;
    margin: 30px auto 0;
    text-align: center;
    min-height: 620px;
    padding-top: 55px;
    .forget-pw {
      width: 960px;
      border-bottom: 3px solid #e0e2e5;
      margin: -30px auto 70px;
      ul {
        width: 650px;
        margin: 0 auto;
        .active {
          border-bottom: 3px solid #4786ff;
        }
        .active1 {
          background: #4786ff;
        }
        .active2 {
          border-bottom: 3px solid #4786ff;
        }
        .active3 {
          background: #4786ff;
        }
        .active4 {
          border-bottom: 3px solid #4786ff;
        }
        .active5 {
          background: #4786ff;
        }
        li {
          list-style: none;
          width: 200px;
          line-height: 66px;
          font-size: 16px;
          color: #666;
          float: left;
          position: relative;
          cursor: pointer;
          padding-bottom: 4px;
          margin-bottom: -3px;
          span {
            width: 42px;
            height: 42px;
            background-color: #e0e2e5;
            display: inline-block;
            line-height: 42px;
            border-radius: 6px;
            color: #fff;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            margin-right: 16px;
            position: relative;
            i {
              transform: rotate(-45deg);
              -webkit-transform: rotate(-45deg);
              -moz-transform: rotate(-45deg);
              display: block;
              text-align: center;
            }
          }
        }
      }
    }
    .one_main {
      .photo {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        border: 1px solid #cdcfd1;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
      }
      span {
        display: block;
        width: 10%;
        border-right: 1px solid #cdcfd1;
        i {
          font-size: 25px;
        }
      }
      input {
        width: 90%;
        border: 0;
        outline: none;
        padding: 0 20px;
      }
      .btn {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        background: #4786ff;
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        font-size: 20px;
        line-height: 30px;
      }
      .list {
        height: auto;
        padding-top: 10px;
        width: 40%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        div {
          color: #c3c5c7;
          font-size: 16px;
        }
        .login {
          color: #666;
          &:hover {
            color: #4786ff;
          }
        }
      }
      p {
        height: 25px;
        width: 40%;
        margin: 0 auto;
        font-size: 12px;
        color: red;
        line-height: 25px;
        border: 1px solid #fc4c24;
        margin-top: 10px;
      }
    }
    .two_main {
      .msg {
        div {
          font-size: 18px;
          color: #666;
          padding: 35px 0 18px;
          line-height: 18px;
          margin-bottom: -10px;
        }
        i {
          color: #c3c5c7;
          font-size: 12px;
          margin-left: -90px;
        }
        span {
          color: #666;
          padding-top: 12px;
          display: block;
          line-height: 14px;
          // text-align: left;
          margin-left: -230px;
        }
      }
      .btn {
        height: 40px;
        width: 30%;
        margin: 0 auto;
        background: #4786ff;
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        font-size: 20px;
        line-height: 30px;
      }
      .box-card {
        height: 40px;
        width: 30%;
        margin: 0 auto;
        // border: 1px solid #cdcfd1;
        border-right: 0;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
        span {
          display: block;
          width: 10%;
          border: 1px solid #cdcfd1;
          i {
            font-size: 25px;
          }
        }
        input {
          width: 56%;
          border: 0;
          outline: none;
          border: 1px solid #cdcfd1;
          border-left: 0;
          padding: 0 20px;
          // margin-left: -23px;
        }
        button {
          width: 35%;
          border: 0;
          outline: none;
          box-shadow: 0 0 10px 1px #b5ceff;
          background: #4786ff;
          color: #fff;
          cursor: pointer;
        }
      }
      p {
        height: 25px;
        width: 30%;
        margin: 0 auto;
        font-size: 12px;
        color: red;
        line-height: 25px;
        border: 1px solid #fc4c24;
        margin-top: 10px;
      }
    }
    .three_main {
      .newpsw {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        border: 1px solid #cdcfd1;
        display: flex;
        justify-content: space-between;
        border-radius: 3px;
        margin-top: 20px;
        span {
          display: block;
          width: 10%;
          border-right: 1px solid #cdcfd1;
          i {
            font-size: 25px;
          }
        }
        input {
          width: 90%;
          border: 0;
          outline: none;
          padding: 0 20px;
        }
      }
      p {
        height: 25px;
        width: 40%;
        margin: 0 auto;
        font-size: 12px;
        color: red;
        line-height: 25px;
        border: 1px solid #fc4c24;
        margin-top: 10px;
      }
      .btn {
        height: 40px;
        width: 40%;
        margin: 0 auto;
        background: #4786ff;
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        font-size: 20px;
        line-height: 30px;
      }
    }
  }
}
</style>


